<script lang="ts" setup>
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import Banner from './components/Banner.vue';
import Prime from './components/Prime.vue';
import Recommend from './components/Recommend.vue';
import Repository from './components/Repository.vue';
import Organization from './components/Organization.vue';
import CommunityData from './components/CommunityData.vue';
import OperationCard from './components/OperationCard.vue';
import Developer from './components/Developer.vue';
import Footer from './components/Footer.vue';
import Sidebar from './components/Sidebar.vue';
import CommunityCard from './components/CommunityCard.vue';
import ScrollToTop from './components/ScrollToTop.vue';
import Column from './components/Column.vue';

const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
});

const { $fetch } = useFetch();

const { data: count } = useAsyncData(
  'home:index:number',
  () => $fetch('/popSpecialColumn/getInfoAndColumnCount', { method: 'post' }),
);
</script>

<template>
  <section class="pb-80">
    <Sidebar />
    <ScrollToTop />
    <div>
      <Banner v-if="props.options.Carousel == 1" />
    </div>
    <div class="container">
      <div class="flex justify-between">
        <div class="flex-grow">
          <Prime v-if="props.options.Selected == 1" />
          <Recommend />
        </div>
        <div class="ml-20 w-360 flex-shrink-0">
          <CommunityCard />
          <CommunityData v-if="props.options.CommunityData == 1" />
          <OperationCard v-if="props.options.OperationCard == 1" />
          <Column v-if="count?.columnCount > 0" />
          <Repository v-if="props.options.Repository == 1" />
          <Organization v-if="props.options.Organization == 1" />
          <Developer v-if="props.options.Developer == 1" />
          <Footer />
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
</style>
